<script setup lang="ts">
import { ref } from "vue";
const activeIndex = ref(0);
const handleSelect = (e: any) => {
  console.log('e: ', e);
};
</script>
<template>
  <div class="header-container">
    <div class="logo-content"><h1>Hulu</h1></div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1"><router-link to="/editor/home">child1</router-link></el-menu-item>
      <el-menu-item index="2"><router-link to="/editor/about">child2</router-link></el-menu-item>
    </el-menu>
  </div>
</template>
<style lang="less">
.header-container {
  width: 100%;
  height: 60px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-start;
  .logo-content {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 1px #e6e6e6;
  }
  .el-menu {
    width: 100%;
  }
}
</style>
